﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "新增站点";
}

<div class="bg-white p-4">
    <form method="post" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">站点名称</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="username" lay-verify="required" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">域名列表</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">根目录</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="username" lay-verify="required" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="username" lay-verify="required" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">FTP</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="checkbox" name="ftp" title="创建|不创建" lay-skin="switch" lay-filter="ftp-checkbox-filter">
            </div>
        </div>

        <div class="layui-form-item hidden" id="ftp-form">
            <div class="layui-inline">
                <label class="layui-form-label">FTP账号</label>
                <div class="layui-input-block">
                    <input type="text" id="ftp-account" placeholder="FTP账号" class="layui-input" autocomplete="off" />
                    <div id="generate-ftp-account" class="layui-input-split layui-input-suffix flex justify-center items-center" cursor>
                        <i class="layui-icon layui-icon-refresh"></i>
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">FTP密码</label>
                <div class="layui-input-inline">
                    <input type="text" id="ftp-password" placeholder="FTP密码" class="layui-input" autocomplete="off" />
                    <div id="generate-ftp-password" class="layui-input-split layui-input-suffix flex justify-center items-center" style="cursor: pointer;">
                        <i class="layui-icon layui-icon-refresh"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">数据库</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="checkbox" name="CCC" title="创建|不创建" lay-skin="switch" lay-filter="database-checkbox-filter">
            </div>
        </div>

        <div class="layui-form-item hidden" id="database-form">
            <div class="layui-inline">
                <label class="layui-form-label">数据库账号</label>
                <div class="layui-input-block">
                    <input type="text" id="database-account" placeholder="数据库账号" class="layui-input" autocomplete="off" />
                    <div id="generate-database-account" class="layui-input-split layui-input-suffix flex justify-center items-center" style="cursor: pointer;">
                        <i class="layui-icon layui-icon-refresh"></i>
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">数据库密码</label>
                <div class="layui-input-inline">
                    <input type="text" id="database-password" placeholder="数据库密码" class="layui-input" autocomplete="off" />
                    <div id="generate-database-password" class="layui-input-split layui-input-suffix flex justify-center items-center" style="cursor: pointer;">
                        <i class="layui-icon layui-icon-refresh"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-inline layui-input-wrap">
                <button type="submit" class="layui-btn">创建</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>

@section Scripts
{
    <script>
        layui.use(function (){
            var form = layui.form;
            
            form.on('switch(ftp-checkbox-filter)', function(data){
                var elem = data.elem; // 获得 checkbox 原始 DOM 对象
                var checked = elem.checked; // 获得 checkbox 选中状态
                var value = elem.value; // 获得 checkbox 值
                var othis = data.othis; // 获得 checkbox 元素被替换后的 jQuery 对象

                if (elem.checked){
                    $("#ftp-form").removeClass('hidden');
                }else{
                    $("#ftp-form").addClass('hidden');
                }
            });

            form.on('switch(database-checkbox-filter)', function(data){
                var elem = data.elem; // 获得 checkbox 原始 DOM 对象
                var checked = elem.checked; // 获得 checkbox 选中状态
                var value = elem.value; // 获得 checkbox 值
                var othis = data.othis; // 获得 checkbox 元素被替换后的 jQuery 对象

                if (elem.checked){
                    $("#database-form").removeClass('hidden');
                }else{
                    $("#database-form").addClass('hidden');
                }
            });

            // 为生成FTP账号的按钮添加点击事件监听
            $('#generate-ftp-account').on('click', function() {
                var randomString = generateRandomString(12);
                $('#ftp-account').val(randomString);
            });
            $('#generate-ftp-password').on('click', function() {
                var randomString = generateRandomString(12);
                $('#ftp-password').val(randomString);
            });
            $('#generate-database-account').on('click', function() {
                var randomString = generateRandomString(12);
                $('#database-account').val(randomString);
            });
            $('#generate-database-password').on('click', function() {
                var randomString = generateRandomString(12);
                $('#database-password').val(randomString);
            });

            // 生成指定长度的随机字符串
            function generateRandomString(length) {
                var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                var result = '';
                for (var i = 0; i < length; i++) {
                    var randomIndex = Math.floor(Math.random() * characters.length);
                    result += characters.charAt(randomIndex);
                }
                return result;
            }
        })
        
        
    </script>
}
